<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5、几何体</title>
    <script src="js/three.js"></script>
    <script src="js/OrbitControls.js"></script>

    <style>
        body {
            margin: 0;
            overflow: hidden;
            /* 隐藏body窗口区域滚动条 */
        }
    </style>
</head>
<body>

<div id="menu" style="padding: 10px">
    <!--    <button id="menu_render">渲染</button>-->
</div>
<div id="webgl" style="border-width: 1px;border-color: blue;border-style: solid"></div>


<script>


    //圆弧
    function drawArc() {
        var geometry = new THREE.Geometry();
        var material = new THREE.LineBasicMaterial({
            color:0x000000
        });
        var arc = new THREE.ArcCurve(0, 0, 100, 0, 2 * Math.PI);
        geometry.setFromPoints(arc.getPoints(50));
        return  new THREE.Line(geometry, material); //点模型对象
    }

    //两个顶点数据
    function drawTowPointData() {
        var geometry1 = new THREE.Geometry();
        var p1 = new THREE.Vector3(50, 0, 0); //顶点1坐标
        var p2 = new THREE.Vector3(0, 70, 0); //顶点2坐标
        geometry1.vertices.push(p1, p2);
        var material1 = new THREE.LineBasicMaterial({
            color: 0x00ffff,
        });
        return new THREE.Line(geometry1, material1);
    }

    //三维直线
    function draw3DLine() {
        var geometry2 = new THREE.Geometry();
        var p3 = new THREE.Vector3(50, 0, 0); //顶点1坐标
        var p4 = new THREE.Vector3(0, 70, 30); //顶点2坐标
        var LineCurve = new THREE.LineCurve3(p3, p4);
        var pointArr = LineCurve.getPoints(10);
        geometry2.setFromPoints(pointArr);
        var material2 = new THREE.LineBasicMaterial({
            color: 0x000000,
        });
        return  new THREE.Line(geometry2, material2);
    }

    //二维直线
    function draw2DLine() {
        var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry
        var p1 = new THREE.Vector2(70, 0); //顶点1坐标
        var p2 = new THREE.Vector2(0, 70); //顶点2坐标
        var LineCurve = new THREE.LineCurve(p1, p2);
        var pointArr = LineCurve.getPoints(10);
        geometry.setFromPoints(pointArr);
        var material = new THREE.LineBasicMaterial({
            color: 0x999999,
        });
        return new THREE.Line(geometry, material);
    }

    //三维样条曲线
    function draw3DCurve() {
        var geometry = new THREE.Geometry();
        // 三维样条曲线  Catmull-Rom算法
        var curve = new THREE.CatmullRomCurve3([
            new THREE.Vector3(-50, 20, 90),
            new THREE.Vector3(-10, 40, 40),
            new THREE.Vector3(0, 0, 0),
            new THREE.Vector3(60, -60, 0),
            new THREE.Vector3(70, 0, 80)
        ]);
        //getPoints是基类Curve的方法，返回一个vector3对象作为元素组成的数组
        var points = curve.getPoints(100); //分段数100，返回101个顶点
        geometry.setFromPoints(points);
        var material = new THREE.LineBasicMaterial({
            color: 0x000000
        });
        return new THREE.Line(geometry, material);
    }

    //贝塞尔曲线
    function drawBesselCurve() {
        var geometry = new THREE.Geometry();
        var p1 = new THREE.Vector3(-80, 0, 0);
        var p2 = new THREE.Vector3(20, 100, 0);  //控制点
        var p3 = new THREE.Vector3(80, 0, 30);
        // 三维二次贝赛尔曲线
        var curve = new THREE.QuadraticBezierCurve3(p1, p2, p3);

        var points = curve.getPoints(100); //分段数100，返回101个顶点
        geometry.setFromPoints(points);
        var material = new THREE.LineBasicMaterial({
            color: 0x337AFF
        });
        return new THREE.Line(geometry, material);
    }

    //曲线组合 路径
    function drawCurvePath() {
        var geometry = new THREE.Geometry();
        var R = 80;
        var arc = new THREE.ArcCurve(0, 0, R, 0, Math.PI, true);
        var line1 = new THREE.LineCurve3(new THREE.Vector2(R, 200, 0), new THREE.Vector2(R, 0, 0));
        var line2 = new THREE.LineCurve3(new THREE.Vector2(-R, 0, 0), new THREE.Vector2(-R, 200, 0));
        // 创建组合曲线对象CurvePath
        var CurvePath = new THREE.CurvePath();
        // 把多个线条插入到CurvePath中
        CurvePath.curves.push(line1,arc,line2);
        var points = CurvePath.getPoints(200);
        geometry.setFromPoints(points);

        //材质对象
        var material = new THREE.LineBasicMaterial({
            color: 0xD433FF
        });
        return new THREE.Line(geometry, material);
    }

    var scene = new THREE.Scene();  //创建场景对象Scene
    scene.add(drawArc());
    scene.add(drawTowPointData());
    scene.add(draw3DLine());
    scene.add(draw2DLine());
    scene.add(draw3DCurve());
    scene.add(drawBesselCurve());
    scene.add(drawCurvePath());

    //辅助坐标系
    var axisHelper = new THREE.AxisHelper(250);
    scene.add(axisHelper);

    //环境光
    var ambient = new THREE.AmbientLight(0x777777);
    scene.add(ambient);//环境光添加到场景中

    //相机设置
    var width = window.innerWidth;
    var height = window.innerHeight;
    var k = width / height;  //窗口宽高比
    var s = 200;  //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 200, 100);  //设置相机位置
    camera.lookAt(scene.position);  //设置相机方向（指向的场景对象）

    //创建渲染对象
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    renderer.setClearColor(0xFFFFFF, 1);
    document.getElementById("webgl").appendChild(renderer.domElement);

    //--------鼠标操作---------
    function render() {
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    }

    render();
    var controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象

</script>

</body>
</html>